<template>
	<view class="echarts_item">
		<view class="ranking-title">绩效考核排行榜</view>

		<!-- 表头 -->
		<view class="ranking-header">
			<view class="ranking-col rank-col" @click="sortData('rank')">
				名次
				<!-- <u-icon name="arrow-down-fill" size="16" color="#fff"></u-icon> -->
			</view>
			<view class="ranking-col name-col" @click="sortData('name')">
				客户经理
				<!-- <u-icon name="arrow-down-fill" size="16" color="#fff"></u-icon> -->
			</view>
			<view class="ranking-col score-col" @click="sortData('score')">
				得分
				<!-- <u-icon name="arrow-down-fill" size="16" color="#fff"></u-icon> -->
			</view>
		</view>

		<!-- 排名列表 -->
		<view class="ranking-list">
			<view v-for="(item, index) in sortedList" :key="index" class="ranking-item" :class="{
          'first-place': index === 0,
          'second-place': index === 1,
          'third-place': index === 2,
          'zebra-row': index % 2 === 1  // 斑马条纹：奇数行应用
        }">
				<view class="ranking-col rank-col">
					<text class="rank-number ">{{ index + 1 }}</text>
				</view>
				<view class="ranking-col name-col color-333">{{ item.name }}</view>
				<view class="ranking-col score-col color-333">{{ item.score }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "RankingList",
		props: {
			listData: {
				type: Array,
				default: () => [{
						name: "陈静",
						score: 99.5
					},
					{
						name: "农金贵",
						score: 98.2
					},
					{
						name: "张能发",
						score: 97.8
					},
					{
						name: "彭艾雯",
						score: 93.5
					},
					{
						name: "雷小楠",
						score: 92.3
					},
					{
						name: "黄秀丽",
						score: 90.6
					},
					{
						name: "韦芯玮",
						score: 89.4
					},
					{
						name: "杨辉",
						score: 85.6
					},
					{
						name: "黄甘霜",
						score: 85.3
					},
					{
						name: "叶青森",
						score: 84.3
					}
				]
			}
		},
		data() {
			return {
				sortField: 'score',
				sortOrder: 'desc'
			};
		},
		computed: {
			sortedList() {
				return [...this.listData].sort((a, b) => {
					if (this.sortField === 'score') {
						return this.sortOrder === 'desc' ?
							b.score - a.score :
							a.score - b.score;
					} else if (this.sortField === 'name') {
						return this.sortOrder === 'desc' ?
							b.name.localeCompare(a.name) :
							a.name.localeCompare(b.name);
					} else {
						return this.sortOrder === 'desc' ?
							b.originalIndex - a.originalIndex :
							a.originalIndex - b.originalIndex;
					}
				});
			}
		},
		created() {
			this.listData.forEach((item, index) => {
				item.originalIndex = index;
			});
		},
		methods: {
			sortData(field) {
				if (this.sortField === field) {
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
				} else {
					this.sortField = field;
					this.sortOrder = field === 'score' ? 'desc' : 'asc';
				}
			}
		}
	};
</script>

<style scoped>
	.ranking-container {
		width: 90%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.ranking-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		padding: 12rpx 0;
		text-align: center;
		border-bottom: none;
		/* 去掉原底部边框 */
	}

	.ranking-header {
		display: flex;
		background-color: #3589e7;
		/* 表头背景色 */
		border-bottom: 1px solid #2a70c5;
		/* 深色边框与表头区分 */
	}

	.ranking-col {
		padding: 12rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		/* 表头文字白色 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.color-333 {
		color: #333;
	}

	.rank-col {
		width: 20%;
	}

	.name-col {
		width: 40%;
	}

	.score-col {
		width: 40%;
	}

	.ranking-item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		align-items: center;
		background-color: #fff;
		/* 偶数行背景色 */
	}

	/* 斑马条纹：奇数行背景色 */
	.zebra-row {
		background-color: #f5f9ff;
		/* 浅蓝色作为斑马条纹色 */
	}

	.ranking-item:last-child {
		border-bottom: none;
	}

	.rank-number {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50%;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}

	/* 前三名样式 */
	.first-place .rank-number {
		background-color: #ff4d4f;
	}

	.second-place .rank-number {
		background-color: #faad14;
	}

	.third-place .rank-number {
		background-color: #1890ff;
	}

	/* 前三名覆盖斑马条纹背景 */
	.first-place,
	.second-place,
	.third-place {
		background-color: #fff8f0;
	}

	/* 普通名次样式 */
	.ranking-item:not(.first-place):not(.second-place):not(.third-place) .rank-number {
		background-color: #e8e8e8;
		color: #666;
	}
</style>